import React, { Suspense, lazy } from 'react';
import { Spin } from "antd";

export function loadable<T extends React.ComponentType<any>>(lazyCom: Promise<{ default: T }>, params?: {
  isShowLoading?: boolean,
  loadingStyle?: React.CSSProperties,
  getLoading?: () => React.ReactNode,
}): React.LazyExoticComponent<T> {
  const { isShowLoading = true, getLoading, loadingStyle } = params ?? {};
  const LazyCom = lazy(() => lazyCom);

  // @ts-ignore
  return (props: any) => {
   
    return (
      <Suspense fallback={isShowLoading ? <Loading getLoading={getLoading} style={loadingStyle} /> : null}>
        <LazyCom {...props} />
      </Suspense>
    )
  }
}

interface LoadingProps {
  getLoading?: () => React.ReactNode,
  style?: React.CSSProperties,
}

const Loading: React.FC<LoadingProps> = ({ getLoading, style }) => {

  return getLoading ? getLoading() : <div
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      minWidth: 100,
      minHeight: 100,
      ...style,
    }}
  ><Spin /></div>
}
